<script setup lang="ts">
import {ChatItem} from "common";

const props = defineProps({
  chatInfo:{

    default:{
      name:'',
      avatar:'',
      message:'',
      unread:0,
      lastMessage:'',
      time:new Date()
    }
  }
})
</script>

<template>
<div class="chat-list-item">
  <v-badge   :model-value="chatInfo.unread!==0" :content="chatInfo.unread?chatInfo.unread:''" color="red">
    <v-avatar :image="chatInfo.avatar" size="36" rounded="1" class="avatar"></v-avatar>
  </v-badge>
  <div class="message-container">
    <div class="user-name">{{chatInfo.name}}</div>
    <div class="message">{{chatInfo.lastMessage}}</div>
  </div>
  <div style="height: 100%">
    <div class="time">{{chatInfo.time}}</div>
  </div>
</div>
</template>

<style scoped lang="scss">
.chat-list-item{
  gap: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  height: 56px;
  cursor: pointer;
  &:hover{
    background: rgba(88,88,88,0.1);
  }

  .avatar{
    border-radius: 3px;
  }
  .message-container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    .user-name{
      font-weight: bold;
      line-height: 14px;
      font-size: 14px;
    }
    .message{
      line-height: 12px;
      font-size: 12px;

    }

  }
  .time{
    display: inline-block;
    font-size: 12px;
    vertical-align: top;
  }

}
</style>